import React from 'react';
import Container from '../components/Base/Container';
import { WhiteSpace, WingBlank, SearchBar, Icon } from 'antd-mobile';
import { routerRedux, Link } from 'dva/router';
import { connect } from 'dva';
import styles from './Association.less';
import styles2 from '../components/Base/HistorySearch.less';
import HistorySearch from '../components/Base/HistorySearch';

class Association extends React.Component{

  state={
    focus:false,
  }

  submit=(value, name)=>{
    this.props.dispatch(routerRedux.push({
      pathname: '/associationResult',
      query: {
        id: value,
      },
    }))
    let storage=localStorage.getItem('association')||'';
    let str=`&${name}=${value}`
    storage=storage.replace(str,'');
    storage+=str;
    localStorage.setItem('association', storage);
  }

  submitFirst=(val)=>{
    let {recommend}=this.props.association;
    if(recommend.length&&recommend[0]){
      this.submit(recommend[0]._id, recommend[0].cls2);
    }
  }

  change=(value)=>{
    this.props.dispatch({type:'association/fetchRecommend', payload:{key:value}});
  }

  render(){
    let { clsqezTop10, recommend}=this.props.association;
    return(
      <Container title="连带销售">
        <div className={styles.bgWhite}>
          <WingBlank size="sm">
            <SearchBar
              placeholder="搜索商品"
              onSubmit={this.submitFirst}
              onChange={this.change}
              onFocus={()=>{this.setState({focus:true})}}
              onBlur={()=>{setTimeout(()=>{this.setState({focus:false})},50)}}
            />
          </WingBlank>

          {
            this.state.focus&&
            <div className={styles.recommend}>
              {
                recommend&&recommend.map((item,index)=>{
                  return (
                    <div key={index} className={styles2.historyItem} onClick={this.submit.bind(this,item._id,item.cls2)}>
                      <Icon type={require('../svg/search.svg')} className={styles2.icon1} />
                      <div className={styles2.name}>
                        {item.cls2}
                      </div>
                      <Icon type={require('../svg/leftTop.svg')} className={styles2.icon2} />
                    </div>
                  )
                })
              }
            </div>
          }

          {
            !this.state.focus&&
              <div>
                <hr className={styles.hr}/>
                <WingBlank>
                  <div>热门商品</div>
                  <WhiteSpace />
                  <div>
                    {
                      clsqezTop10.map((item,index)=>{
                        return (
                          <span className={styles.key} key={index} onClick={this.submit.bind(this,item._id,item.cls2)}>{item.cls2}</span>
                        )
                      })
                    }
                  </div>
                </WingBlank>
                <WhiteSpace size="lg" className={styles.whiteSpace} />

                <HistorySearch item="association" />
              </div>
          }
        </div>
      </Container>
    )
  }
}

export default connect(({association})=>({association}))(Association)
